'use client';

import { useState } from 'react';
import { ChannelDetail } from '@/types/channel';
import ChatSidebar from './ChatSidebar';
import DonationModal from './DonationModal';
import Link from 'next/link';
import './style.scss';

type Props = {
	channel: ChannelDetail;
};

export default function WatchView({ channel }: Props) {
	const [showDonation, setShowDonation] = useState(false);
	const embedUrl = channel.videoId
		? `https://www.youtube.com/embed/${channel.videoId}?autoplay=1&mute=1`
		: null;

	return (
		<div className="watch-page">
			<div className="watch-page__content">
				{/* 플레이어 */}
				<div className="watch-page__player">
					{embedUrl ? (
						<iframe
							src={embedUrl}
							allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
							allowFullScreen
							title={channel.liveTitle || channel.name}
						/>
					) : (
						<div className="watch-page__offline">
							<p>현재 방송 중이 아닙니다</p>
							<Link href={`/channel/${channel.channelSID}`}>채널 페이지로 이동</Link>
						</div>
					)}
				</div>

				{/* 채널 정보 */}
				<div className="watch-page__info">
					<h1 className="watch-page__title">{channel.liveTitle || channel.name}</h1>
					<div className="watch-page__channel">
						<Link href={`/channel/${channel.channelSID}`} className="watch-page__channel-name">
							{channel.name}
							{channel.isVerified && <span className="watch-page__verified" title="인증됨">✓</span>}
						</Link>
						{channel.handle && <span className="watch-page__handle">@{channel.handle}</span>}
					</div>
					<div className="watch-page__actions">
						<button type="button" className="watch-page__donate-btn" onClick={() => setShowDonation(true)}>
							💰 후원하기
						</button>
					</div>
				</div>
			</div>

			{/* 우측 채팅 */}
			<div className="watch-page__chat">
				<ChatSidebar onDonate={() => setShowDonation(true)} />
			</div>

			{/* 후원 모달 */}
			{showDonation && (
				<DonationModal
					channelSID={channel.channelSID}
					onClose={() => setShowDonation(false)}
				/>
			)}
		</div>
	);
}